<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import Cookie from 'js-cookie';

const router = useRouter()

// 获取团队详情
const team_id = router.currentRoute.value.params['team_id']
const team_detail = ref(null)
const cookie = Cookie.get('userData')
const userData = cookie == undefined ? null : JSON.parse(cookie)

if (userData != null) {
    const hall_request = new Request(`http://api.linwine.space/api/sjk/team/detail/${team_id}`, {
        method: 'GET',
        headers: new Headers({
            'Content-Type': 'application/json',
            'Token': userData['Token']
        })
    })
    fetch(hall_request)
        .then((response) => response.json())
        .then((res) => {
            if(res.code == 200) {
                
            }
            else {
                alert(res.msg)
            }
        })
}

</script>
<template>
    <div class="team-container" >
        <div class="team" v-if="team_detail" >
            <div class="header">
                <p style="margin-right: 88px;" >xxx课题</p>
                <p>xxx团队</p>
            </div>
            <div class="main" >
                <div class="members" >
                    <p>已有成员</p>
                    <div class="team-students-container" >
                        <Avatar v-for="(name, index) in 10" :name="name" :key="index"
                            :url="'/src/assets/images/student/avatar.svg'" :style="{ margin: '5px 15px' }" />
                    </div>
                </div>
                <div class="intro-and-scores" >
                    <p>团队简介</p>
                    <div class="intro-and-scores-content" >
                        <div class="introduction" >
                            Lorem ipsum dolor sit amet, consectetur 
adipiscing elit.Aenean euismod bibendum
 laoreet. Proin gravida dolor sit amet lacus 
accumsan et viverra justo commodo. Proin 
sodales pulvinar sic  tempor. Sociis natoque 
penatibus et magnis dis parturient montes,
 nascetur ridiculus mus. Nam fermentum,
 nulla luctus pharetra vulputate, felis tellus
 mollis orci, sed rhoncus pronin sapien nunc
 accuan eget
                        </div>
                        <hr />
                        <p>团队成绩</p>
                        <div class="scores" >

                        </div>
                    </div>
                </div>
            </div>
            <div class="footer" >
                <button type="button" >申请加入该团队</button>
            </div>
        </div>
    </div>


</template>
<style scoped>
.team-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.team-container > .team {
    /* display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center; */
    background-color: #ffffff;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
        width: 1057px;
    margin: 50px 0;
    padding: 15px 45px ;
}

.team-container > .team > .header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    /* width: 30%; */
}

.team-container > .team > .header > p {
    font-family: Source Han Sans CN;
	font-size: 32px;
	font-weight: bold;
	color: #707070;
}

.team-container > .team > .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.team-container > .team > .main p {
    font-family: Source Han Sans CN;
	font-size: 22px;
	font-weight: bold;
	color: #707070;
    margin-bottom: 14px;
}

.team-container > .team > .main p::after {
    content: ": "
}

.team-container > .team > .main > .members {
    width: 35%;
}

.team-container > .team > .main > .members > .team-students-container {
    display: flex;
    flex-wrap: wrap;
    padding: 9px 17px 11px 17px;
    border: solid 1px #8a8a8a;
    background-color: transparent;
    height: 478px;
    overflow-y: auto;
}

.team-container > .team > .main > .intro-and-scores {
    width: 60%;
    
}

.team-container > .team > .main > .intro-and-scores > .intro-and-scores-content {
    height: 478px;
	background-color: #e4e7ed;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
    padding: 17px;
}

.team-container > .team > .main > .intro-and-scores > .intro-and-scores-content > .introduction {
    width: 100%;
    height: 196px;
    font-family: Source Han Sans CN;
	font-size: 14px;
	color: #707070;
    margin-bottom: 20px;
}

.team-container > .team > .main > .intro-and-scores > .intro-and-scores-content > hr {
    color: #707070;
    margin-bottom: 14px;
}

.team-container > .team > .main > .intro-and-scores > .intro-and-scores-content > .scores {
    height: 157px;
	background-color: #ffffff;
}

.team-container > .team > .footer {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.team-container > .team > .footer > button {
    width: 326px;
	height: 40px;
	background-color: #8493a6;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
	border-radius: 10px;
    color: #ffffff;
    font-family: Source Han Sans CN;
	font-size: 18px;
    line-height: 40px;
	color: #fafafa;
    border: none;
    user-select: none;
    cursor: pointer;
}

.team-container > .team > .footer > button:hover {
    opacity: 0.85;
}

.team-container > .team > .footer > button:active {
    transform: translateY(3px);
}


</style>